<template>
  <div class="profile-container">
    <h3>个人资料</h3>
    <el-form :model="form" label-width="100px" style="max-width: 600px" v-loading="loading">
      <!-- 固定头像区域 -->
      <el-form-item label="头像">
        <div class="avatar-container">
          <el-avatar :size="100" src="/static/images/admin-avatar.svg"></el-avatar>
          <div class="avatar-info">管理员</div>
        </div>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAdminById, updateAdminProfile } from '@/api/admin'

export default {
  name: 'AdminProfile',
  data() {
    return {
      loading: false, // 页面加载状态
      submitting: false, // 表单提交状态
      adminId: 1, // 管理员ID，实际应从登录信息获取
      form: {
        adminId: null,
        username: '',
        email: '',
        phone: ''
      }
    }
  },
  created() {
    // 页面加载时获取管理员信息
    this.fetchAdminInfo()
  },
  methods: {
    // 获取管理员个人信息
    fetchAdminInfo() {
      this.loading = true
      getAdminById(this.adminId)
        .then(res => {
          if (res.code === 200) {
            // 将后端返回的数据填充到表单中
            const adminData = res.data
            this.form = {
              adminId: adminData.adminId,
              username: adminData.username,
              email: adminData.email,
              phone: adminData.phone
            }
            this.$message.success('获取个人信息成功')
          } else {
            this.$message.error(res.message || '获取个人信息失败')
          }
        })
        .catch(error => {
          console.error('获取个人信息出错', error)
          this.$message.error('获取个人信息失败，请稍后再试')
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 保存个人信息
    handleSubmit() {
      this.submitting = true
      
      // 创建要提交的数据对象
      const updateData = { ...this.form };
      
      updateAdminProfile(updateData)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('个人信息保存成功')
          } else {
            this.$message.error(res.message || '保存个人信息失败')
          }
        })
        .catch(error => {
          console.error('保存个人信息出错', error)
          this.$message.error('保存个人信息失败，请稍后再试')
        })
        .finally(() => {
          this.submitting = false
        })
    }
  }
}
</script>

<style scoped>
.profile-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.avatar-info {
  color: #606266;
  font-size: 14px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  margin-top: 5px;
  display: block;
}
</style> 